<template>
    <div class="container">
        <div class="card-container">
            <div class="tab">基本信息</div>
            <el-form :model="patientData" :inline="true" class="demo-form-inline">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="姓名" required>
                            <el-input v-model="patientData.patientName" placeholder="请输入姓名" style="width: 180px" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="手机号" required>
                            <el-input v-model="patientData.phone" placeholder="请输入手机号" style="width: 175px" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="身份证号">
                            <el-input v-model="patientData.idCard" placeholder="请输入身份证号" style="width: 180px" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="性别" required>
                            <el-radio-group v-model="patientData.gender" class="ml-4">
                                <el-radio :label="1">男</el-radio>
                                <el-radio :label="2"> 女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="出生日期" required>
                            <el-date-picker v-model="patientData.birth" type="date" placeholder="出生日期"
                                format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 150px" :disabled-date="disabledDate" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="文化程度" required>
                            <el-select v-model="patientData.education" placeholder='请选择'>
                                <el-option v-for="item in educationData" :label="item.label" :value="item.value"
                                    :key="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="民族">
                            <el-select v-model="patientData.ethnicGroup" placeholder='请选择' style="width: 210px">
                                <el-option v-for="item in ethnicGroupData" :label="item.label" :value="item.value"
                                    :key="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="血型">
                            <el-select v-model="patientData.bloodType" placeholder='请选择'>
                                <el-option v-for="item in bloodTypeData" :label="item.label" :value="item.value"
                                     />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="门诊号">
                            <el-input v-model="patientData.clinicNumber" placeholder="请输入门诊号" style="width: 175px" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="婚姻状况">
                            <el-select v-model="patientData.maritalStatus" placeholder='请选择' style="width: 175px">
                                <el-option v-for="item in maritalStatusData" :label="item.label" :value="item.value"
                                    :key="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="职业">
                            <el-select v-model="patientData.occupation" placeholder='请选择' style="width: 210px">
                                <el-option v-for="item in occupationData" :label="item.label" :value="item.value"
                                    :key="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="医院">
                            <el-select v-model="patientData.hospitalId">
                                <el-option v-for="item in hospitalData" :label="item.hospitalName" :value="item.id"
                                    :key="item.id" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="card-container" style="margin-top:20px;">
            <div class="tab">健康信息</div>
            <el-form :model="patientData" class="demo-form-inline">
                <el-form-item label="过敏史">
                    <el-checkbox-group v-model="allergyHistoryList">
                        <el-checkbox v-for="item in allergyHistoryData" :label="item.name" :value="item.name"
                            :disabled="isAllergyItemDisabled(item)" :key="item.name" @change="checkChangeAllergy" />
                    </el-checkbox-group>
                    <el-input type="textarea" :rows="3" v-model="allergyRemark" v-if=" isAllergyShow"
                        placeholder="请输入具体过敏药物名称" />
                </el-form-item>
                <el-form-item label="暴露史">
                    <el-checkbox-group v-model="exposureHistoryList">
                        <el-checkbox v-for="item in exposureHistoryData" :label="item.name" :value="item.name"
                            :disabled="isExposureItemDisabled(item)" :key="item.name" />
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="既往史">
                    <el-checkbox-group v-model="pastHistoryList">
                        <el-checkbox v-for="item in pastHistoryData" :label="item.name" :value="item.name"
                            :disabled="isPastItemDisabled(item)" :key="item.name" />
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="家族史">
                    <el-radio-group v-model="familyData" class="ml-4">
                        <el-radio v-for="item in familyHistoryData" :label="item.name" :value="item.name"
                            @change="radioChangeFamily($event,item)" :key="item.name" />
                    </el-radio-group>
                    <el-input type="textarea" :rows="3" v-model="familyRemark" v-if=" isFamilyShow"
                        placeholder="请输入家庭成员的具体疾病史" />
                </el-form-item>
                <el-form-item label="遗传病史">
                    <el-radio-group v-model="geneticData" class="ml-4">
                        <el-radio v-for="item in geneticHistoryData" :label="item.name" :value="item.name"
                            @change="radioChangeGenetic($event,item)" :key="item.name" />
                    </el-radio-group>
                    <el-input type="textarea" :rows="3" v-model="geneticRemark" v-if=" isGeneticShow"
                        placeholder="请输入具体遗传病史" />
                </el-form-item>
                <el-form-item label="残疾情况">
                    <el-checkbox-group v-model="disabilityHistoryList">
                        <el-checkbox v-for="item in disabilityHistoryData" :label="item.name" :value="item.name"
                            :disabled="isDisabilityItemDisabled(item)" :key="item.name"
                            @change="checkChangeDisability" />
                    </el-checkbox-group>
                    <el-input type="textarea" :rows="3" v-model="disabilityRemark" v-if=" isDisabilityShow"
                        placeholder="请输入具体残疾情况" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" :rows="3" v-model=patientData.remark />
                </el-form-item>
            </el-form>
            <div class="bottom-btn">
                <el-button class="save" @click="save">保存</el-button>
            </div>
        </div>
    </div>

</template>
<script lang="ts" setup>
    import { ref, reactive, computed, onMounted } from 'vue'
    import { useRouter, useRoute } from 'vue-router'
    import { useStore } from 'vuex'
    import { ElMessage } from 'element-plus'
    import { updatePatientMessage, getHospitalList, getPatientMessage } from '@/api/patient/index'
    import {IHospitalResponse,IPatientMessageResponse} from '@/types/api'
    import { checkIdCard } from '@/utils/checkId'
    const store = useStore()
    const router = useRouter();
    const route = useRoute();
    const patientId = ref('')
    patientId.value = route.query.patientId as string
    const disabledDate=(time:Date)=>{
        return time.getTime() > Date.now(); 
    }
    const save = () => {
        flag.value = true
        changeCheckStatus(allergyHistoryData.value, allergyHistoryList.value)
        changeCheckStatus(disabilityHistoryData.value, disabilityHistoryList.value)
        changeCheckStatus(exposureHistoryData.value, exposureHistoryList.value)
        changeCheckStatus(pastHistoryData.value, pastHistoryList.value)
        addRemark(allergyHistoryData.value, allergyRemark.value)
        addRemark(disabilityHistoryData.value, disabilityRemark.value)
        changeRadioStatus(familyHistoryData.value, familyData.value)
        changeRadioStatus(geneticHistoryData.value, geneticData.value)
        addRemark(familyHistoryData.value, familyRemark.value)
        addRemark(geneticHistoryData.value, geneticRemark.value)
        patientData.value.allergyHistory = JSON.stringify(allergyHistoryData.value)
        patientData.value.exposureHistory = JSON.stringify(exposureHistoryData.value)
        patientData.value.familyHistory = JSON.stringify(familyHistoryData.value)
        patientData.value.geneticHistory = JSON.stringify(geneticHistoryData.value)
        patientData.value.disabilityHistory = JSON.stringify(disabilityHistoryData.value)
        patientData.value.pastHistory= JSON.stringify(pastHistoryData.value)
        patientData.value.patientId = patientId.value
        if (!checkIdCard(patientData.value.idCard)) {
            ElMessage({
                type: 'warning',
                message: '请输入正确的身份证号'
            })
            return false
        } else {
            updatePatientMessage(patientData.value).then(res => {
                if (res.data.code === 0) {
                    ElMessage({
                        type: 'success',
                        message: '编辑患者信息成功'
                    })
                    router.push('/patientManage')
                } else {
                    ElMessage({
                        type: 'warning',
                        message: '患者信息编辑错误'
                    })
                    getPatientMessage(patientId.value).then(res => {
                        patientData.value = res.data.result
                        changeParse()
                    })
                }
            })
        }
    }
    //改变checked值
    const changeCheckStatus = (data: any, value: any) => {
        data.forEach((item: any) => {
            if (item.remark) { return false }
            if (value.includes(item.name)) {
                item.checked = true
            } else {
                item.checked = false
            }
        })
    }
    //改变radio值
    const changeRadioStatus = (data: any, value: any) => {
        data.forEach((item: any) => {
            if (item.remark) { return false }
            if (item.name == value) {
                item.checked = true
            } else {
                item.checked = false
            }
        })
    }
    const patientData: any = ref({})
    const educationData = reactive([
        {
            value: 0,
            label: '小学'
        },
        {
            value: 1,
            label: '初中'
        },
        {
            value: 2,
            label: '高中'
        },
        {
            value: 3,
            label: '专科'
        },
        {
            value: 4,
            label: '本科'
        },
        {
            value: 5,
            label: '硕士及以上'
        },
        {
            value: 6,
            label: '其他'
        }
    ])
    const ethnicGroupData = reactive([
        {
            value:-1,
            label:'请选择'
        },
        {
            value: 0,
            label: '汉族'
        },
        {
            value: 1,
            label: '少数民族'
        },

    ])
    const bloodTypeData = reactive([
        {
            value:-1,
            label:'请选择'
        },
        {
            value: 0,
            label: 'A型'
        },
        {
            value: 1,
            label: 'B型'
        },
        {
            value: 2,
            label: 'O型'
        },
        {
            value: 3,
            label: 'AB型'
        },
        {
            value: 4,
            label: 'RH阴性'
        },
        {
            value: 5,
            label: 'RH阳性'
        },
        {
            value: 6,
            label: 'RH不详'
        },
        {
            value: 6,
            label: '不详'
        }
    ])
    const maritalStatusData = reactive([
        {
            value:-1,
            label:'请选择'
        },
        {
            value: 0,
            label: '已婚'
        },
        {
            value: 1,
            label: '未婚'
        },
        {
            value: 2,
            label: '丧偶'
        },
        {
            value: 3,
            label: '离婚'
        },
        {
            value: 4,
            label: '未说明的婚姻状态'
        },
    ])
    const occupationData = reactive([
        {
            value:-1,
            label:'请选择'
        },
        {
            value: 0,
            label: '国家机关、党群组织、企业、事业单位负责人'
        },
        {
            value: 1,
            label: '专业技术人员'
        },
        {
            value: 2,
            label: '办事人员和有关人员'
        },
        {
            value: 3,
            label: '商业、服务业人员'
        },
        {
            value: 4,
            label: '农、林、牧、渔、水利业生产人员'
        },
        {
            value: 5,
            label: '生产、运输设备操作人员及有关人员'
        },
        {
            value: 6,
            label: '军人'
        }, {
            value: 7,
            label: '不便分类的其他从业人员'
        },
        {
            value: 8,
            label: '学生'
        },
        {
            value: 9,
            label: '无职业'
        }
    ])
    const hospitalData:any = ref([])
    const allergyHistoryData:any = ref([])
    const exposureHistoryData:any = ref([])
    const pastHistoryData:any = ref([])
    const geneticHistoryData:any = ref([])
    const familyHistoryData:any = ref([])
    const disabilityHistoryData:any = ref([])
    //如果其他被选中则默认打开文本域
    const isAllergyShow = ref(false)
    const isFamilyShow = ref(false)
    const isGeneticShow = ref(false)
    const isDisabilityShow = ref(false)
    //将得到的数据转为对象
    const allergyHistoryList:any = ref([])
    const exposureHistoryList:any = ref([])
    const pastHistoryList:any = ref([])
    const disabilityHistoryList:any = ref([])
    //取Checked为true属性的数据,标记数据，展示文本域(过敏史与遗传病史)
    const filterData = (data: any, flag: number) => {
        if (flag === 0) {
            data.forEach((item: any) => {
                if (item.checked === true) {
                    allergyHistoryList.value.push(item.name)
                }
                if (item.remark !== '' && item.remark !== undefined) {
                    allergyRemark.value = item.remark
                }
                if (item.name === '其他' && item.checked === true) {
                    isAllergyShow.value = true
                }
            })
        } else {
            data.forEach((item: any) => {
                if (item.checked === true) {
                    disabilityHistoryList.value.push(item.name)
                }
                if (item.remark !== '' && item.remark !== undefined) {
                    disabilityRemark.value = item.remark
                }
                if (item.name === '其他残疾' && item.checked === true) {
                    isDisabilityShow.value = true
                }
            })
        }
        data.splice(data.length - 1, 1)
    }
    //取Checked为true属性的数据，暴露史与既往史
    const filterDataSencond = (data: any, list: any) => {
        data.forEach((item: any) => {
            if (item.checked === true) {
                list.push(item.name)
            }
        })
    }
    //家族史与遗传史的改变
    const radioFilter = (data: any, flag: number) => {
        if (flag === 0) {
            data.forEach((item: any) => {
                if (item.checked === true) {
                    familyData.value = item.name
                }
                if (item.remark !== '' && item.remark !== undefined) {
                    familyRemark.value = item.remark
                    isFamilyShow.value = true
                }
            })
        } else {
            data.forEach((item: any) => {
                if (item.checked === true) {
                    geneticData.value = item.name
                }
                if (item.remark !== '' && item.remark !== undefined) {
                    geneticRemark.value = item.remark
                    isGeneticShow.value = true
                }
            })
        }
        data.splice(data.length - 1, 1)
    }
    //将json字符串转为对象
    const changeParse = () => {
        allergyHistoryData.value = JSON.parse(patientData.value.allergyHistory)
        filterData(allergyHistoryData.value, 0)
        exposureHistoryData.value = JSON.parse(patientData.value.exposureHistory)
        filterDataSencond(exposureHistoryData.value, exposureHistoryList.value)
        pastHistoryData.value = JSON.parse(patientData.value.pastHistory)
        filterDataSencond(pastHistoryData.value, pastHistoryList.value)
        familyHistoryData.value = JSON.parse(patientData.value.familyHistory)
        radioFilter(familyHistoryData.value, 0)
        geneticHistoryData.value = JSON.parse(patientData.value.geneticHistory)
        radioFilter(geneticHistoryData.value, 1)
        disabilityHistoryData.value = JSON.parse(patientData.value.disabilityHistory)
        filterData(disabilityHistoryData.value, 1)
    }
    //过敏史其他中的数据
    const allergyRemark = ref("")
    //残疾情况其他中的数据
    const disabilityRemark = ref("")
    //过敏史复选框改变
    const checkChangeAllergy = () => {
        if (allergyHistoryList.value.includes('其他')) {
            isAllergyShow.value = true
        } else {
            isAllergyShow.value = false
            allergyRemark.value = ''
        }
    }
    const checkChangeDisability = () => {
        if (disabilityHistoryList.value.includes('其他残疾')) {
            isDisabilityShow.value = true
        } else {
            isDisabilityShow.value = false
            disabilityRemark.value = ''
        }
    }
    //选择家族史中的有选项
    const familyRemark = ref("")
    //选择遗传病史中的有选项
    const geneticRemark = ref("")
    //家族史与遗传病史单选框改变
    const radioChangeFamily = (e: any, i: any) => {
        if (e == '有' && i.name == '有') {
            isFamilyShow.value = true
        } else {
            isFamilyShow.value = false
            familyRemark.value = ''
        }
    }
    const radioChangeGenetic = (e: any, i: any) => {
        if (e == '有' && i.name == '有') {
            isGeneticShow.value = true
        } else {
            isGeneticShow.value = false
            geneticRemark.value = ''
        }
    }
    //向每个history中加入remark
    const addRemark = (data: any, value: any) => {
        data.push({ remark: value })
    }
    //过敏史的无与其他选项的禁用
    const flag = ref(false)
    const isAllergyItemDisabled = computed(() => (item: any) => {
        if (flag.value === true) {
            return false
        } else if (item.name === '无') {
            //如何选择了其他，就禁用无
            return allergyHistoryList.value.length > 0 && !allergyHistoryList.value.includes('无');
        } else {
            // 如果选择了 "无"，则禁用其他项  
            return allergyHistoryList.value.includes('无');
        }
    });
    //暴露史的无与其他选项的禁用
    const isExposureItemDisabled = computed(() => (item: any) => {
        if (flag.value === true) {
            return false
        } else if (item.name === '无') {
            //如何选择了其他，就禁用无
            return exposureHistoryList.value.length > 0 && !exposureHistoryList.value.includes('无');
        } else {
            // 如果选择了 "无"，则禁用其他项  
            return exposureHistoryList.value.includes('无');
        }
    })
    //既往史的无与其他选项的禁用
    const isPastItemDisabled = computed(() => (item: any) => {
        if (flag.value === true) {
            return false
        } else if (item.name === '无') {
            //如何选择了其他，就禁用无
            return pastHistoryList.value.length > 0 && !pastHistoryList.value.includes('无');
        } else {
            // 如果选择了 "无"，则禁用其他项  
            return pastHistoryList.value.includes('无');
        }
    })
    //残疾情况的无与其他选项的禁用
    const isDisabilityItemDisabled = computed(() => (item: any) => {
        if (flag.value === true) {
            return false
        } else if (item.name === '无') {
            //如何选择了其他，就禁用无
            return disabilityHistoryList.value.length > 0 && !disabilityHistoryList.value.includes('无');
        } else {
            // 如果选择了 "无"，则禁用其他项  
            return disabilityHistoryList.value.includes('无');
        }
    })
    //家族史被选中的值
    const familyData = ref('')
    //遗传史被选中的值
    const geneticData = ref('')
    onMounted(async () => {
        store.commit('updateTitle', '编辑患者信息')
        const resH:IHospitalResponse=await getHospitalList()
            hospitalData.value = resH.data.result
        const resP:IPatientMessageResponse = await getPatientMessage(patientId.value)
            patientData.value = resP.data.result
            changeParse()
    })
</script>
<style scoped lang="scss">
    .demo-form-inline .el-input {
        --el-input-width: 160px;
    }

    .demo-form-inline .el-select {
        --el-select-width: 160px;
    }

    .container {
        background-color: rgb(239, 242, 254);

        .card-container {
            padding: 10px;
            background-color: white;
            border-radius: 5px;
        }

        .tab {
            margin-bottom: 10px;
            border-left: 3px solid rgb(8, 79, 222);
            padding-left: 20px;
        }

        .bottom-btn {
            text-align: center;

            .save {
                background-color: rgb(22, 155, 213);
                color: white;
            }
        }
    }
</style>